<template>
  <Card class="table-tool">
    <Button class="table-tool-btn" type="info" @click="openRoleEditModal()">创建角色</Button>
    <Button class="table-tool-btn" type="warning" @click="deleteRole(selectedColunms.map(item=>item.id))">批量删除
    </Button>
  </Card>
  <Table
      border
      show-header
      :data="roleData"
      :columns="roleColunms"
      @on-selection-change="tableSelectChange"
  >
    <template #action="{ row, index }">
      <Button class="action-btn" size="small" type="info" @click="openRoleEditModal(row)">编辑</Button>
      <Button class="action-btn" size="small" type="info" @click="openUserToRoleModal(row)">分配用户</Button>
      <Button class="action-btn" size="small" type="warning" @click="deleteRole(row.id)">删除</Button>
    </template>

  </Table>
  <CPage
      :change-complete="handleGetList"
      :total="roleData.length"
  ></CPage>
  <RoleEditModal @addRoleComplete="addRoleComplete">

  </RoleEditModal>
  <UserToRoleModal></UserToRoleModal>
</template>
<script setup>
import RoleEditModal from "@/module-base/views/sys-manage/role/role-edit-modal.vue";
import UserToRoleModal from "@/module-base/views/sys-manage/role/user-to-role-modal.vue";
import CPage from "@/components/lz-page/lz-page.vue";
import {ref} from "vue";
import {useRoleStore} from '@module-base/stores/roleStore.js'
const {openRoleEditModal:openRoleEditModal, closeRoleEditModal,openUserToRoleModal} = useRoleStore()
const roleColunms = ref([
  {
    type: 'selection',
    width: 60,
    align: 'center'
  },
  {
    type: 'index',
    width: 80,
    title: '序号',
    align: 'center'
  },
  {
    title: '角色名称',
    key: 'roleName'
  }, {
    title: '操作',
    slot: 'action',
  }]);
const selectedColunms = ref([])

function tableSelectChange(v) {
  selectedColunms.value = v
}

import {useRoleHandle} from "@/module-base/views/sys-manage/role/roleHandle.js";
import {Message} from "view-ui-plus";

const {
  roleData: roleData,
  deleteRole: deleteRole,
  handleGetList: handleGetList
} = useRoleHandle()

function addRoleComplete() {
  // 添加用户成功后重新获取列表
  handleGetList()
  Message.success('添加成功')
  closeRoleEditModal()
}
function addUserToRole(){

}

</script>
<style scoped>

</style>